<template>
  <div class="wrap">
    <scroll-view
      :refresher-enabled="true"
      :refresher-threshold="2"
      :refresher-triggered="updating"
      :scroll-y="true"
      :show-scrollbar="true"
      class="scroll_class"
      @refresherrefresh="getData"
    >
      <div v-if="workingList.length > 0" class="has_data">
        <div v-for="(item, index) in workingList" :key="index" class="working">
          <div class="title">{{ item.name }}</div>
          <div class="type_ticket">
            <div class="tic_text">未开票订单数</div>
            <div class="tic_num">{{ item.noneBillCount }}</div>
          </div>
          <div class="type_ticket">
            <div class="tic_text">部分开票订单数</div>
            <div class="tic_num">{{ item.partialBill }}</div>
          </div>
          <div class="footer">
            <div class="find_all" @click="findAll(item.id, item.type)">查看全部</div>
          </div>
        </div>
      </div>
      <div v-if="!updating && workingList.length > 0" class="bottom_word">没有更多了</div>
      <div v-if="workingList.length === 0" class="no_data">
        <Image height="198" name="no_data" oss width="140" />
      </div>
      <div class="space" />
    </scroll-view>
    <TabBar />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Router } from '@U/common'
import Image from '@C/Image.vue'
import { getTicketTotalList } from './request'

const workingList: any = ref([])
const updating: any = ref(false)
const findAll = (studioId: number, type: number) => {
  Router.push('gl_ticket_list', { studioId, type })
}

async function getData() {
  updating.value = true
  const res = await getTicketTotalList()
  updating.value = false
  if (res?.code === 200) {
    workingList.value = res?.data
  }
  updating.value = false
}

onMounted(() => {
  updating.value = true
})
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #F2F2F7;
  .scroll_class {
    width: 100%;
    height: 100%;
    .has_data {
      width: 100%;
      .working {
        width: 92%;
        margin: 0 auto;
        padding: 0 24rpx;
        margin-top: 24rpx;
        min-height: 206rpx;
        max-height: 466rpx;
        border-radius: 24rpx;
        background-color: #fff;
        .title {
          width: 100%;
          height: 94rpx;
          line-height: 94rpx;
          margin-bottom: 8px;
          border-bottom: 2rpx solid rgba(0,0,0,0.1);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: rgba(0,0,0,0.85)
        }
        .type_ticket {
          width: 100%;
          height: 32px;
          display: flex;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #595959;
          .tic_text {
            width: 40%;
            height: 100%;
            line-height: 32px;
          }
          .tic_num {
            width: 60%;
            height: 100%;
            line-height: 32px;
            text-align: right;
          }
        }
        .footer {
          width: 100%;
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border-top: 1px solid rgba(0,0,0,.1);
          margin-top: 8px;
          .find_all {
            width: 180rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border: 1px solid #1890ff;
            border-radius: 30rpx;
            color: #1890FF;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #1890FF;
          }
        }
      }
    }
    .bottom_word {
      width: 100%;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      margin-top: 24rpx;
    }
    .space {
      width: 100%;
      height: 180rpx;
    }
    .no_data {
      width: 100%;
      height: 300rpx;
      margin-top: 200rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
